Applying transitions 應用過渡效果

優秀的過渡動畫具備以下特點：

1 Follows accessibility settings 遵循無障礙設定

如果使用者開啟減少動畫選項，過渡動畫應使用漸隱效果，避免劇烈滑動或縮放。避免使用裝飾性動畫（如視差、形狀變形）以減少視覺刺激。

2 Consistent 保持空間的一致性

過渡效果應在同一個連貫的空間內進行，使用者易於理解空間佈局。

3 Stable layouts 佈局穩定

使用骨架屏載入，防止內容在載入過程中突然跳動或位移，影響使用者體驗。

4 No jarring jump cuts  避免生硬的跳切

直接瞬間切換可能會讓使用者感到迷失，建議使用動畫引導使用者理解頁面變化。

5 Coherent spatial model 建立空間模型

一致的過渡方式能幫助使用者理解介面層級，例如在展開和摺疊檢視之間保持統一的動畫風格。避免不同方向的過渡混合使用，會讓空間佈局混亂

6 Unified direction 統一方向

過渡動畫應沿著一個主要軸移動，避免多個元素各自獨立運動，以防使用者分心。只有像主視覺影象這樣的重要元素在整個過渡過程中保持不變，這有助於引導使用者的注意力。

7 Clean fades 乾淨的漸隱過渡

在新內容淡入之前，需要完全淡出原有內容，以避免透明元素重疊導致的視覺混亂。過渡動畫應該快速完成，並在動畫最快的階段切換內容。

避免在現有內容上緩慢淡入淡出，這會造成半透明元素疊加，使介面顯得混亂。對話方塊或底部彈出欄等元素的漸隱過渡應當快速簡潔，以免動畫效果分散使用者的注意力。

8 Simple style 簡潔風格

過渡效果不適合過度風格化的動畫。這些效果出現頻率高，佔用大量螢幕空間，其主要目的是幫助使用者完成任務。

Choosing a transition pattern 選擇一種過渡模式

1 Container transform 容器轉換

適用於建立元素之間的關係，適用於較強的視覺表現：

• 適合英雄時刻（如重要圖片或主要內容展開）。

• 適用於細節展開，例如點選某個元素展開更多資訊。

• 適合無縫連線元素，如搜尋框擴充套件為搜尋頁面。

2 Forward and backward 前進和後退

適用於層級導航，即使用者在不同層級間切換

3 Lateral 側向過渡

適用於同級內容（如選項卡、輪播圖），透過水平滑動切換：

• 強調內容的對等關係，如左右滑動切換音樂、照片等。

• 不適用於層級導航，避免全屏滑動導致過渡過度。

避免使用橫向過渡來瀏覽層級式介面。在整個螢幕寬度上滑動內容對於頻繁的過渡來說過於誇張。這種動畫效果暗示內容之間是平等的關係，這與介面的層級結構不相符。

4 Top level 頂級導航

點選導航欄、側邊欄或抽屜欄時，系統會使用快速淡入淡出效果切換到新的目標頁面。由於頂級頁面之間並非總是相關聯，這種簡單的過渡效果刻意避免在頁面間建立視覺聯絡。此類導航不建議使用橫向過渡模式，因為這會暗示頁面間可以滑動切換，容易與輪播圖或可滑動列表等其他元件產生混淆。

5 Enter and Exit 進入和退出

此過渡模式用於向UI新增新元件，如需使用者操作的模態對話方塊或可同時操作的底部工作表。避免用於層級導航，因為全屏高度滑動會使介面關係混亂。